<template>
  <div class="file-list-container">
    <div class="loading" v-if="loading">
      加载中...
    </div>
    <el-row v-else :gutter="16" class="file-grid">
      <el-col
        v-for="file in files"
        :key="file.shareId"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        :xl="4" 
        class="file-col"
      >
        <div
          class="file-card"
          @click="$router.push(`/file/${file.shareId}/${file.products.productId}`)"
        >
          <div class="file-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
              <path fill="#42b983" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/>
              <path fill="#35495e" d="M14 3v5h5l-5-5zm-3 14h4v-2h-4v2zm0-6h4v-2h-4v2z"/>
            </svg>
          </div>
          <div class="file-info">
            <h3 class="file-name">{{ file.products.name }}</h3>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
interface FileItem {
  shareId: string;
  products: {
    productId: string;
    name: string;
  };
}
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router' // 新增路由钩子导入
const route = useRoute()
// 添加Element Plus导入
import { ElMessage } from 'element-plus'
import {getFileList} from '../api/index'
// 在setup中获取路由实例
const loading = ref(true)
const files = ref<FileItem[]>([]) // 添加类型注解

onMounted(async () => {
  try {
    const pathParam = route.params.shareOnlyId
    console.log('pathParam:', pathParam)
    // 修改为直接传递参数
    const res = await getFileList({ shareOnlyId: pathParam as string })
    if(res.code == 200){
      files.value = res.data
    }
  } catch (error) {
    console.error('获取文件列表失败:', error)
    ElMessage.error('获取文件列表失败')
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
.file-list-container {
  max-width: 100%; 
  margin: 0 auto;
  padding: 2rem;
  min-height: calc(100vh - 120px); /* 添加最小高度 */
}

.page-title {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 2rem;
}

.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 调整卡片最小宽度 */
  gap: 1.5rem;
  padding: 1rem;
}

.file-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
}

.file-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.file-icon {
  margin-right: 1.2rem;
  flex-shrink: 0;
}

.file-info {
  flex-grow: 1;
}

.file-name {
  color: #2c3e50;
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.file-id {
  color: #7f8c8d;
  margin: 0;
  font-size: 0.9rem;
}

.loading {
  text-align: center;
  color: #42b983;
  font-size: 1.2rem;
  padding: 2rem;
}
</style>

<style scoped>
.file-list-container {
  padding: 1rem;
}

.file-grid {
  margin: 0 -8px;
}

.file-col {
  padding: 8px;
}

.file-card {
  padding: 1rem;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .file-name {
    font-size: 1rem;
  }
  .file-id {
    font-size: 0.8rem;
  }
}
</style>
